<script setup>
const props = defineProps({ label: String })
</script>
<template>
  <div class="book-item">
    <div class="poster">
      <img src="@/assets/icon/book.svg" />
    </div>
    <div class="label">{{ props.label }}</div>
  </div>
</template>
<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.book-item {
  cursor: pointer;
  user-select: none;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  margin-bottom: 20px;

  .poster {
    flex: 1;
    .flex-center();
    img {
      height: 160px;
    }
  }
  .label {
    .flex-center();
    height: 30px;
  }
}
</style>
